<template>
  <div class="message" :class="{ show: currentShow, transparent: transparent }">
    <div class="content" :class="type">
      <template v-if="type === 'loading'">
        <i class="ivu-icon ivu-icon-load-c ivu-load-loop"></i>
        <span>{{content || '加载中...'}}</span>
      </template>
      <template v-if="type === 'success'">
        <i class="ivu-icon ivu-icon-checkmark-circled"></i>
        <span>{{content || '操作成功'}}</span>
      </template>
      <template v-if="type === 'error'">
        <i class="ivu-icon ivu-icon-close-circled"></i>
        <span>{{content || '操作失败'}}</span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'message',
  data () {
    return {
      timer: null,
      type: 'loading',
      content: '',
      duration: 0,
      defaultContent: '',
      currentShow: false,
      transparent: true
    }
  },
  created () {
  },
  methods: {
    _show (options) {
      clearTimeout(this.timer)
      this.content = ''
      let _type = Object.prototype.toString.call(options)
      if (_type === '[object String]') {
        this.content = options
      } else if (_type === '[object Object]') {
        if (options.content) {
          this.content = options.content
        }
        if (options.duration && options.duration >= 0) {
          this.duration = options.duration
        }
        if (options.transparent !== undefined) {
          this.transparent = options.transparent
        }
      }
      this.currentShow = true
    },
    loading (options) {
      this.type = 'loading'
      this._show(options)
    },
    success (options) {
      if (this.duration > 0) {
        // 当页面中多个http请求时，需将duration递增，触发duration的watch事件
        this.duration++
      } else {
        this.duration = 1500
      }
      this.type = 'success'
      this._show(options)
    },
    error (options) {
      if (this.duration > 0) {
        // 当页面中多个http请求时，需将duration递增，触发duration的watch事件
        this.duration++
      } else {
        this.duration = 1500
      }
      this.type = 'error'
      this._show(options)
    },
    close () {
      if (this.type !== 'loading') {
        return
      }
      this.content = ''
      this.currentShow = false
    }
  },
  watch: {
    duration (n, o) {
      clearTimeout(this.timer)
      if (n > 0) {
        this.timer = setTimeout(() => {
          this.currentShow = false
        }, n)
      }
    },
    currentShow (n, o) {
      if (!n) {
        this.duration = -1
      }
    }
  }
}
</script>

<style lang="less" scoped>
.message
{
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(#000, 0.1);
  text-align: center;
  &.show
  {
    display: block;
  }
  &.transparent
  {
    background-color: transparent;
  }
  .content
  {
    position: relative;
    top: 15px;
    display: inline-block;
    pointer-events: all;
    padding: 8px 16px;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    background-color: #fff;
    user-select: none;
    .ivu-icon
    {
      position: relative;
      top: 1px;
      font-size: 14px;
      color: #2d8cf0;
    }
    span
    {
      margin-left: 8px;
    }
    &.error
    {
      .ivu-icon
      {
        color:#EB4124;
      }
    }
    &.success
    {
      .ivu-icon
      {
        color:#29BD6E;
      }
    }
  }
}
</style>
